<template>
  <div class="relicAnalyse">
    <div class="title">
      <span>统计分析 | 文物统计</span>
    </div>
    <div id="myChart" ref="myChart" style="width: 1000px; height: 600px"></div>
  </div>
</template>
  
<script>
import { findGroupTypeCount } from "@/api/admin";
import * as echarts from "echarts";
export default {
  name: "relicAnalyse",
  data() {
    return {
      typeCountList: [],
      chartInstance: null, // ECharts 实例
    };
  },
  mounted() {
    this.findCount(); // 组件挂载时初始化图表
  },
  methods: {
    initChart() {
      // 初始化 ECharts 实例
      this.chartInstance = echarts.init(this.$refs.myChart);
      const option = {
        animationDurationUpdate: 500, // 缩短数据更新动画时间
        title: {
          text: "文物分类统计",
          left: "center",
          textStyle: {
            fontSize: 20,
            color: "#666666",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 70,
          bottom: 20,
          height: 400,
          data: this.typeCountList.map((item) => item.name),
        },
        series: [
          {
            name: "分类名称",
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            data: this.typeCountList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    async findCount() {
      await findGroupTypeCount()
        .then((res) => {
          if (res.data.code === 200) {
            this.typeCountList = res.data.data.typeCountList;
            this.initChart();
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  beforeDestroy() {
    // 清除图表实例
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
};
</script>
  
  <style scoped>
.title {
  height: 50px;
  line-height: 50px;
  color: #666666;
  margin-bottom: 20px;
  font-size: 18px;
  padding-left: 10px;
}
</style>